html { background-color: #333; }

body { margin: auto; 
 width: 80%;
 background-color: white;
  align-content: center;
  box-shadow: 0px 0px 130px;
  margin-bottom: 200px;
  margin-top: 0px;
  padding: 0px;
  font-family: 'montserrat'

}






.headerbox {
    background-color:; 
    font-family: 'Montserrat';
    font-size: 21px;
      
      padding-top: 10px; padding-bottom: 30px;
      margin-top: 30px; margin-bottom:0px;
      margin-left: 12%; margin-right: 12%;
      justify-content: center;
      min-width: 250px;
  }
  
  
.bubblefloat {
    
    background-color: rgb(0, 0, 0);

    margin-left: auto; margin-right: auto;
    margin-bottom: 10px; margin-top: 40px;
    padding-left: 100px; 
    padding-right: 100px;
    padding-top: 20px;
    padding-bottom: 20px;
    max-width: 300px;
    min-width: 300px;
    border-bottom-left-radius: 200px;
    border-top-left-radius: 200px;
    border-top-right-radius: 200px;
  border-bottom-right-radius: 200px;

}


.hello {
  color: white;
  font-family:'montserrat';
    text-align: center;
    font-size: 50pt;
}

.bubbleleft { 
  background-color: #ff6f7b;
  margin-top: 0px; margin-bottom: 0px;
  margin-right: 25%;
  padding-left: 15%; 
  padding-right: 40px;
  padding-top: 40px;
  padding-bottom: 70px;

  max-width: 550px;
  min-width: 320px;
  border-top-right-radius: 200px;
  border-bottom-right-radius: 200px;
 
          
}

.bubbleright { 
  background-color: #000000; color: white;
  margin-left: 30%;
  margin-top: 50px; 
  padding-left: 10%;
  padding-right: 50px;
  padding-top: 30px; padding-bottom: 30px;
  width: fit-content;
  max-height: 10%;

  
  border-top-left-radius: 200px;
  border-bottom-left-radius: 200px;

  
  display: flex;
  flex-direction: row;
  
    align-items: center;
    justify-content: center;
    gap: 20px;
}


      @media (max-width: 1000px) {
      .bubbleright {
       flex-direction: column;
       align-content: right;
       padding-right: 0;
       }
      }


.bubbletext {
  display: block;  
  font-family: 'montserrat';
  width: fit-content;
  min-width: 50%;
    padding: 0;

    margin: 0px;
    float: left;
    text-align: right;

    

}


.face {
    
    display: block;
    float: left;
    padding-right: auto;
    min-width: none;
    max-width: 200px;
    

            
            
}

.im {
  font-size: 30pt;
  font-family: 'Montserrat';
  padding-left: 7px;
}


.lucy {
          font-size: 70pt;
          font-family: 'Montserrat';
          color: white;
}



.logo {
          height: auto;
       
       padding-left: 0px; padding-bottom: 30%; padding-top: 50%;
       
}

.logo2 {
        position: absolute;

}


.h2 {
          font-size: 50px;
          font-family: 'Montserrat';
          padding-top: 0px; padding-bottom: 20px;
          text-align: center;
          
}
 

.h3 { margin-top: 20px; margin-bottom: 20px; font-family: 'montserrat'; text-align: center;}



hr.rounded {
    border-top: 8px solid #ff938e;
    border-radius: 5px;
    margin-top: 0px; margin-bottom: 0px;
    padding: auto;
    max-width: 800px;
    
  }

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: rgb(57, 57, 57);
    vertical-align: center;
    padding-left: 5%; padding-right: 5%; padding-top: 30px; padding-bottom: 30px;
    
    
  }


.flex-container > div {
    background-color: #ffffff;
    width: 300px;
    margin: 10px;
    padding-left: 10px; padding-right: 10px; padding-top: 20px; padding-bottom: 20px;
    text-align: center;
    font-size: 30px;
    font-family: 'Montserrat';
    border-radius: 5px;

    
    box-shadow: inset 0 0 0.5px 1px hsla(0, 0%,  
  100%, 0.075),
  /* shadow ring */
  0 0 0 1px hsla(0, 0%, 0%, 0.05),
  /* multiple soft shadows  */
  0 0.3px 0.4px hsla(0, 0%, 0%, 0.02),
  0 0.9px 1.5px hsla(0, 0%, 0%, 0.045),
  0 3.5px 6px hsla(0, 0%, 0%, 0.09);
  }


.r {
  border-radius: 5px;
}
  .boxsides {
    margin-left: 30px;
  }
.spacer{
  margin-top: 100px;
}

.shadow {
  /* inner glow */
box-shadow: inset 0 0 0.5px 1px hsla(0, 0%,  
  100%, 0.075),
  /* shadow ring */
  0 0 0 1px hsla(0, 0%, 0%, 0.05),
  /* multiple soft shadows  */
  0 0.3px 0.4px hsla(0, 0%, 0%, 0.02),
  0 0.9px 1.5px hsla(0, 0%, 0%, 0.045),
  0 3.5px 6px hsla(0, 0%, 0%, 0.09);
}




#button {
    transition: transform 2s; border-radius: 0s; 
    background: 3s;
    background-color: #ff6f7b;
    margin-left: 10px; margin-top: 30px; margin-bottom: 40px;
    padding-top: 20px; padding-bottom: 20px; padding-left: 30px; padding-right: 30px;
    font-family: "montserrat";
    text-align: center;
    font-size: 24px;
    color: white;
    border-bottom-left-radius: 200px;
    border-top-left-radius: 200px;
    border-top-right-radius: 200px;
  border-bottom-right-radius: 200px;

}

#button:hover {
    transform: rotatey(360deg);
    transition-timing-function: ease;
}

#flex2{ display: flex;
    flex-wrap:wrap;
    flex-direction: row;
    justify-content: center;
    font-weight: ;
   
}


.container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px; /* Space between cards */
            padding: 40px;
            padding-top: 5%;
            padding-bottom: 5%;
            width: fit-content;
           
            background-color: #333;
            height: 100%;
        }

.card {
            background: #333;
            border-radius: 5px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.3);
            overflow: hidden;
            height: 750px; /* Slightly shorter since they are narrower */
            
            /* --- THE KEY CHANGE --- */
            /* We want 4 items per row (25%).
               We subtract 20px to account for the gap property.
               flex: grow shrink basis;
            */
            flex: 1 1 calc(25% - 20px); 
            
            /* Stops cards from getting too huge on big screens */
            max-width: 20%; 
            /* Ensures they don't get too tiny on mobile (triggers wrapping) */
            min-width: 200px; 

            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
        }

.card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.5s ease;
        }

.card:hover {
            transform: translateY(-10px);
            box-shadow: 0 12px 20px rgba(0,0,0,0.4);
            z-index: 10; /* Ensures the hovered card is on top */
        }

.card:hover img {
             transform: scale(1.05);
        }

        /* Optional: On mobile, make them 2 across or 1 across */
        @media (max-width: 900px) {
            .card {
                flex: 1 1 calc(50% - 20px); /* 2 across on tablets */
                max-width: 50%;
            }
        }
        @media (max-width: 600px) {
            .card {
                flex: 1 1 100%; /* 1 across on phones */
                max-width: 100%;
            }
        }